<!--
 * @Author: wuyuxin
 * @Date: 2022-03-19 13:48:52
 * @LastEditors: wuyuxin
 * @LastEditTime: 2022-03-19 14:01:38
 * @Description: 
-->
<template>
  <div>
    <!-- <input v-model="message">
    <input :value="message" @input="message = $event.target.value"> -->

    <!-- 组件上使用v-model -->
    <!-- <hy-input v-model="message"></hy-input> -->
    <!-- <hy-input :modelValue="message" @update:model-value="message = $event"></hy-input> -->

    <!-- 绑定两个v-model -->
    <hy-input v-model="message" v-model:title="title"></hy-input>
    <!-- v-model argument is not supported on plain elements. 原生HTML不允许在v-model上传参-->
    <!-- <input v-model="message" v-model:title="title"> -->

    <h2>{{message}}</h2>
    <h2>{{title}}</h2>
  </div>
</template>

<script>
  import HyInput from './HyInput.vue';

  export default {
    components: {
      HyInput
    },
    data() {
      return {
        message: "Hello World",
        title: "哈哈哈"
      }
    }
  }
</script>

<style scoped>

</style>